<template>
  <div ref="dialogWrap" class="dialog-wrap" v-if="isShow">
    <div class="head-wrap">
      <div class="header">
        <div @click="back()" class="back"><span class="arrow"></span></div>
        <div class="title">培训班选择</div>
        <div class="btn">
          <div class="inner">
            <slot name="btn"></slot>
          </div>
        </div>
      </div>
    </div>
    <section class="">

        <div class="d-scroll list-wenda" style="">
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
          >
          <div v-for="item in list" @click="selectItem(item)" class="item block">
            <div v-if="!isSingleSelect" class="icon-radio" :class="{'icon-radio-checked':selectedIndexOf(item)>=0}" ></div>
            <div v-if="!isSingleSelect"  class="icon pdh-2">
            </div>
            <div class="text-wrap">
              <div class="title"><span>{{item.className}}</span> <span class="status color-tip"></span></div>
              <div class="tip"><span class="one">{{item.institutionsName}}</span></div>
              <div class="tip"><span class="one">培训计划名称：{{item.trainingclass}}</span></div>
              <div class="tip"><span class="one">
办班单位名称：{{item.deptname}}</span></div>
            </div>
          </div>


           <!-- <div @click="selectItem(1)" class="item block">
              <div class="icon-radio" ></div>
              <div class="icon pdh-2">
              </div>
              <div class="text-wrap">
                <div class="title"><span>sss</span> <span class="status color-tip"></span></div>
                <div class="tip"><span class="one">s</span></div>
                <div class="tip"><span class="one">培训计划名称s</span></div>
                <div class="tip"><span class="one">
办班单位名称：s</span></div>
              </div>
            </div>-->

            <div class="pdv-9"></div>
            <div class="pdv-9"></div>
          </cube-scroll>

          <!--<section class="foot-action">
            <div class="inner">
              <span @click="checkAll()" class="text"><span :class="{'icon-radio-checked':checkedList.length==list.length}" class="icon-radio"></span> <span>&nbsp;全选</span></span>
              <div class="btn" @click="save()">
                <div class="default-block-btn">确定</div>
              </div>
            </div>
          </section>-->
        </div>
    </section>
  </div>
</template>


<script>
  export default {
    name: 'TrainClass',
    data () {
      return {
        isSingleSelect: true,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        pageIndex: 1,
        pageSize: 10,
        list: [],
        checkedList: [],
        isShow: false
      }
    },
    created () {
      this.loadData()
    },
    mounted () {
      console.log('mounted')
    },
    methods: {
      show () {
        this.isShow = true
      },
      go (name) {
        this.$router.push({name: name})
      },
      back () {
        this.isShow = false
      },
      save () {
        this.$emit('onSelect', this.checkedList)
        this.back()
      },
      selectItem (item) {
        console.log('selectItem', item)
        this.checkedList = [item]
        return this.save()
        let index = this.selectedIndexOf(item)
        if (index >= 0) {
          this.checkedList.splice(index, 1)
        } else {
          this.checkedList.push(item)
        }
      },
      checkAll () {
        if (this.checkedList.length === this.list.length) {
          this.checkedList = []
        } else {
          this.checkedList = [].concat(this.list)
        }
      },
      selectedIndexOf (item) {
        let index = -1
        this.checkedList.some((v, i) => {
          if (item.id === v.id) {
            index = i
            return false
          }
        })
        return index
      },
      loadData () {
        let params = {
          "limit": this.pageSize,
          "page": this.pageIndex
        }
        return this.fetchService.trainingplanClassList(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()

          this.list = this.list.concat(res.data)
          return res
        })
      },
      onPullingUp () {
        this.pageIndex ++
        this.loadData().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = !true
          }, 100)
        })
      }
    }
  }
</script>

<style scoped>

</style>
